<template>
  <div style="padding: 20px;background-color: darkseagreen;">
    <h2>子组件</h2>
    <p>父组件传递参数：{{ $attrs }}</p>
    <button @click="callFun">调用父亲组件传递的方法</button>
    <slot name="title"/>
  </div>
</template>

<script>
export default {
  name: "ChildDemo",
  props: ['my-age'],
  emits: ['myEvent'],
  mounted() {
    // 直接使用$attrs即可获取到传递的参数，
    console.log(this.$attrs)
    // 如果使用 props 接收了，$attrs就接收不到
    console.log(this)
  },

  // setup有参数，
  // props 是父亲组件传递的属性对象
  // context 是上下文对象
  setup(props, context) {
    console.log('setup 接收参数', props);
    console.log('setup 上下文对象', context);

    // 回调传递的方法
    // 1.在emits中定义传递的方法（非必须）
    // 2.使用context.emit回调，父组件即可收到传递的参数
    const callFun = () => {
      context.emit('myEvent', '哈哈')
    }

    return {
      callFun
    }
  }
}
</script>

<style scoped>

</style>